/**
 * 分项用能=>用能概况=>单分项用能同比分析
 *
 */
import * as React from "react";
import ReactEcharts from "echarts-for-react";
import { TreeSelect, Spin, Modal } from "antd";
import {
  treeSimpleData,
  AjaxData,
} from "../../../../../../data/interface/publicInterface";
import { situationCompare } from "../../../ServeApi";
import "./index.less";

export interface OneDepartmentCompareProps {
  energyType: number;
  treeData: treeSimpleData[];
  onChange?: (num: number) => any;
  defaultValue?: string;
  value?: string;
}

export interface OneDepartmentCompareState {}

class OneDepartmentCompare extends React.Component<
  OneDepartmentCompareProps,
  OneDepartmentCompareState
> {
  state = { loading: false };
  private treeSelectData: any[] = []; //转换而来的选择树数据
  private option: any = {};
  private selectValue: any = null;
  private energyType: number = 1;

  render() {
    return (
      <div className="OneDepartmentCompare">
        <div className="wy_card">
          <div className="wy_card_tit">
            单分项用能同比分析
            <div className="f-right righeSpan">
              <label>分项名称：</label>
              <TreeSelect
                style={{
                  display: "inline-block",
                  width: "auto",
                  minWidth: 200,
                }}
                treeDataSimpleMode
                treeDefaultExpandAll={true}
                treeData={this.treeSelectData}
                value={this.selectValue}
                onChange={(value: string) => {
                  this.onChange(value);
                }}
              />
            </div>
          </div>
          <div className="wy_card_body">
            <Spin spinning={this.state.loading}>
              <ReactEcharts
                option={this.option}
                notMerge={true}
                lazyUpdate={true}
                style={{ height: 314 }}
                // theme="dark"
                // theme="light"
              />
            </Spin>
          </div>
        </div>
      </div>
    );
  }
  /**钩子函数 */
  componentDidMount() {
    this.init(this.props);
    if (this.selectValue && this.energyType) {
      this.situationCompare(); //调用数据
    }
  }
  init(props) {
    let { energyType, treeData } = props;
    let value =
      typeof props.value === "undefined" ? props.defaultValue : props.value;
    this.selectValue = value;
    this.energyType = energyType;
    this.treeSelectData = treeData;
    this.forceUpdate();
  }
  //props拦截控制刷新
  shouldComponentUpdate(newProps, newState) {
    if (newProps.treeData !== this.props.treeData) {
      this.treeSelectData = newProps.treeData;
      this.forceUpdate();
    }
    if (newProps.defaultValue !== this.props.defaultValue) {
      //初始化分项
      let value =
        typeof newProps.value === "undefined"
          ? newProps.defaultValue
          : newProps.value;
      this.selectValue = value;
      this.situationCompare();
      this.forceUpdate();
    }
    if (
      newProps.energyType !== this.props.energyType //用能类型更新
    ) {
      this.energyType = newProps.energyType;
      this.forceUpdate();
      this.situationCompare(); //调用数据
    }
    return true;
  }
  /**主动操作 */
  //切换分项名称
  onChange(value: string) {
    this.selectValue = value;
    this.situationCompare(); //调用数据
    this.forceUpdate();
  }
  /**方法调用 */
  //生成echarts对象
  getWarnOption(dataScouse: any) {
    let str = this.energyType === 1 ? "kW·h" : "t";
    return {
      xAxis: {
        type: "category",
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
      },
      yAxis: {
        name: "单位：" + str,
        splitLine: {
          //网格线
          show: true,
          lineStyle: {
            color: "#ECECEC",
          },
        },
        type: "value",
      },
      grid: {
        left: "3%",
        right: "4%",
        containLabel: true,
      },
      legend: { bottom: 10, left: "center", data: ["本年", "去年"] },
      color: ["#1890FF", "#5AD8A6"],
      series: [
        {
          name: "本年",
          data: dataScouse.list,
          type: "bar",
          showBackground: true,
          backgroundStyle: {
            color: "rgba(180, 180, 180, 0.2)",
          },
        },
        {
          name: "去年",
          data: dataScouse.compareList,
          type: "bar",
          showBackground: true,
          backgroundStyle: {
            color: "rgba(180, 180, 180, 0.2)",
          },
        },
      ],
    };
  }
  /**接口调用 */
  //单分项用能同比分析
  async situationCompare() {
    let _this = this;
    let pream = { energyType: this.energyType, typeId: this.selectValue };
    try {
      this.setState({ loading: true });
      let res: any = await situationCompare(JSON.stringify(pream)).catch(
        (err) => {
          console.log(err);
          _this.setState({ loading: false });
        }
      );
      let json: AjaxData = res;
      if (json.success) {
        _this.option = this.getWarnOption(json.data);
        _this.setState({ loading: false });
        _this.forceUpdate();
      } else {
        Modal.error({
          title: json.message,
          onOk: () => {
            _this.setState({ loading: false });
          },
        });
      }
    } catch (error) {
      Modal.error({
        title: "初始化程序失败，无法读取数据，请刷新页面。",
        onOk: () => {
          _this.setState({ loading: false });
        },
      });
      console.error(error);
    }
  }
}

export default OneDepartmentCompare;
